<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
    <style>
        li {
            list-style: none;
        }

        img {
            width: 150px;
        }

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .main ul {
            background-color: #D3DCE6;

        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="header">Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main class="main">
                <div v-for="(item, index) in msg" class="box">
                    <ul>
                        <li>书名：{{item.title}}</li>
                        <li>作者：{{item.author}}</li>
                        <li>详情：{{item.detail}}</li>
                        <li>图片：<img v-bind:src="item.img"/>
                            <el-button type="primary" @click="btnDel">删除</el-button>
                            <el-button type="success">成功按钮</el-button>
                        </li>
                    </ul>

                </div>


            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                msg: []
            }
        },
        methods: {
            getAirports() {
                axios.get('http://127.0.0.1:8000/Contents/').then(
                    (res) => {
                        this.msg = res.data
                        console.log(res)
                    })
            },
            btnDel() {
                axios.put("http://127.0.0.1:8000/Contents/").then(

                    console.log(124)
                )

            }

        },
        created() {
            clearTimeout(this.timer);  //清除延迟执行
            this.timer = setTimeout(() => {   //设置延迟执行
                this.getAirports();
            }, 2000);
        }
    })
</script>
</html>


